<template>
  <div class="app">
    <el-container>
      <el-header>
        <div class="report_header" ref="headerHeight" style="display: flex; justify-content: space-between;">
          <div style="display: flex;">
            <div class="report_header_left"></div>
            <div style="display: flex;">
              <div :style="{'height': (headerType==false ? '41px':'')}"
                   style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;justify-items: flex-end">
                <div class="report_header_date">
                  <queryDate :beginDate="beginDate" :endDate="endDate" @queryDateClick='queryDateClick'></queryDate>
                </div>
                <div class="report_header_query">
                  <queryShop :shopname="shopname" @queryShopClick="queryShopClick"></queryShop>
                </div>
                <div class="report_header_query">
                  <queryEmployee :operatorName="employeeName" queryTItle="送货员" @queryEmployeeClick="queryEmployeeClick"></queryEmployee>
                </div>
                <div class="report_header_query">
                  <queryMember :membername="membername" @queryMemberClick="queryMemberClick"></queryMember>
                </div>
                <div class="report_header_query">
                  <queryProduct :proname="proname" @queryProductClick="queryProductClick"></queryProduct>
                </div>

                <!--<div class="report_header_query">-->
                  <!--<queryProductCategory :productId="query.productCategory" @queryProductCategoryClick="queryProductCategoryClick"></queryProductCategory>-->
                <!--</div>-->
              </div>
            </div>
          </div>
          <div style="display:flex">
            <el-button style="margin-left: 10px;height: 32px;margin-top: 7px;border-top-left-radius: 4px !important;border-right: 1px solid rgb(102, 177, 255);
                border-bottom-left-radius: 4px !important;border-top-right-radius: 4px !important;border-bottom-right-radius: 4px !important;"
                       size="small" type="primary"
                       @click="loadReport">查询
            </el-button>
            <!--<div @click="chooseClick"-->
                 <!--style="width: 25px;height: 32px;background-color: #1890ff;margin-top: 7px;display: flex;justify-content: center;-->
                   <!--border-top-left-radius: 0px !important;-->
                <!--border-bottom-left-radius: 0px !important;border-top-right-radius: 4px !important;border-bottom-right-radius: 4px !important;align-items: center;">-->
              <!--<i style="font-size: 15px;color: white;"-->
                 <!--:class="[headerType == false?'el-icon-arrow-down':'el-icon-arrow-up']"></i>-->
            <!--</div>-->
            <ExportList2Excel style='margin-top: 5px;margin-left:20px' ref="exportList2Excel"
                              @handleExport="handleExport" name="导出"/>
          </div>
        </div>
      </el-header>
      <el-main>
        <el-table :span-method="totalLine" ref="table" :height="curHeight" :data="tableData" border
                  style="width: 100%;">
          <el-table-column type="index" align="center" label="序号" header-align="center" width="50">
            <template slot-scope="scope">{{ scope.$index == tableData.length - 1 ? '总计' : scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="orderDate" width="100" align="center" header-align="center" label="订单日期">
          </el-table-column>
          <el-table-column prop="orderSn" width="140" align="center" header-align="center" label="订单号">
          </el-table-column>
          <el-table-column prop="memberName" width="120" align="center" header-align="center" label="客户名称">
          </el-table-column>
          <el-table-column prop="memberCode" width="100" align="center" header-align="center" label="客户编号">
          </el-table-column>
          <el-table-column prop="name" label="商品名称" header-align="center" :show-overflow-tooltip="true" width="130">
          </el-table-column>
          <el-table-column prop="sn" label="货号" header-align="center" :show-overflow-tooltip="true" width="100">
          </el-table-column>
          <el-table-column prop="spec" width="120" header-align="center" :show-overflow-tooltip="true" label="规格">
          </el-table-column>
          <el-table-column align="center" prop="unit" header-align="center" width="50" label="单位">
          </el-table-column>
          <el-table-column align="center" prop="quantity" label="送货数量" header-align="center" width="80">
          </el-table-column>
          <el-table-column align="center" prop="returnQuantity" label="退货数量" header-align="center" width="80">
          </el-table-column>
          <el-table-column align="right" width="80" header-align="center" prop="price" label="单价"></el-table-column>
          <el-table-column align="right" header-align="center" prop="subTotal" width="100" label="送货金额" ></el-table-column>
          <el-table-column align="right" prop="returnSubTotal" width="100" header-align="center" label="退货金额">
          </el-table-column>

          <el-table-column prop="deliveryDate" width="180" align="center" header-align="center" label="送达日期">
          </el-table-column>

          <el-table-column align="center" prop="consignee" header-align="center" width="150" label="收件人">
          </el-table-column>
          <el-table-column align="center" prop="phone" header-align="center" width="120" label="收件人电话">
          </el-table-column>
          <el-table-column align="center" prop="address" header-align="center" width="250" label="收件人地址">
          </el-table-column>
          <el-table-column prop="shippingEmployeeName" label="送货员" header-align="center" :show-overflow-tooltip="true"
                           width="120">
          </el-table-column>
          <el-table-column align="left" prop="memo" header-align="center" width="250" label="备注">
          </el-table-column>
          <el-table-column align="center" width="80" header-align="center" label="订单详情">
            <template slot-scope="scope">
              <div class="justify_right shop_Height" @click="clicklookorder(scope.row)"
                   v-if="scope.$index != tableData.length-1">
                <a class="details_Title">查看订单</a>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <div class="report_footer_box">
          <pagination style="margin-left: 10px" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                      @pagination="loadReport"></pagination>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import supplierTable from '../../components/SupplierTable/supplierList'
import memberTable from '@/components/MemberTable/index'
import productTable from '@/components/ProductList/productList'
import elDragDialog from '@/directive/el-drag-dialog'
import querySupplier from '@/components/Query/querySupplier'
import queryEmployee from '@/components/Query/queryEmployee'
import queryProduct from '@/components/Query/queryProduct'
import queryProductCategory from '@/components/Query/queryProductCategory'
import queryDate from '@/components/Query/queryDate'
import queryShop from '@/components/Query/queryShop'
import queryMember from '@/components/Query/queryMember'
import {list as shopList} from '@/api/shop'
import ExportList2Excel from "@/components/ExportList2Excel";
import Pagination from '@/components/Pagination';
import OfficeDialog from '@/components/OfficeDialog/index'
import CategoryDialog from '@/components/CategoryDialog/index'
// import {productDetailList, orderSummary} from '@/api/report'
import {shippingproductDetailList, shippingsummary} from '@/api/report'
import {employeeCountList} from '@/api/report'
import utils from '@/utils/utils'
import {dateFormatter} from '@/filters'
import {list as memberList} from '@/api/member'
import {list as productList} from '@/api/product'
import {list as supplierList} from '@/api/supplier'

export default {
  name: 'deliverymanReport-indexdatailed',
  data() {
    return {
      membername:"",
      printing: 5000,
      productCategoryName: '',
      supplierName: '',
      employeeName:"",
      shopname:'',
      productName: '',
      proname:'',
      beginDate:'',
      endDate:'',
      query: {
        shopId: '',
        supplierId: '',
        employeeId: '',
        memberId: '',
        productCategory: '',
        endDate: '',
        productId: '',
        beginDate: '',
      },
      summaryForm: {},
      memberName: '',
      orderVisible: false,
      fullscreenLoading: false,
      supplierVisible: false,
      memberTableVisible: false,
      weChatPay: 0,
      aliPay: 0,
      memberPay: 0,
      cashPay: 0,
      bankPay: 0,
      waterPay: 0,
      pointPay: 0,
      matchPointPay: 0,
      reportListId: '',
      headerType: false,
      date: [],
      suppierIdOptions: [],
      productOptions: [],
      memberIdOptions: [],
      shopIdOptions: [],
      officeName: '',
      pickerOptions: {//时间快捷选择
        shortcuts: [{
          text: '昨天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      tableData: [],
      curHeight: null,
      pageSize: 20,
      total: 0,
      pageNum: 1,
    }
  },
  directives: {elDragDialog},
  components: {
    Pagination,
    OfficeDialog,
    CategoryDialog,
    ExportList2Excel,
    productTable,
    memberTable,
    supplierTable,
    queryEmployee,
    queryProductCategory,
    queryShop,
    queryProduct,
    querySupplier,
    queryDate,
    queryMember
  },
  updated() {
    this.$nextTick(() => {
      this.$refs['table'].doLayout();
    })
  },
  created() {
    this.getShop()
    if (this.$route.query.id == null) {
      this.query.productId = ""
    } else {
      this.query.productId = this.$route.query.id;
    }
    if(this.$route.query.beginDate){
      this.query.beginDate = this.$route.query.beginDate
      this.beginDate = this.$route.query.beginDate
    }
    if( this.$route.query.endDate){
      this.endDate = this.$route.query.endDate
      this.query.endDate = this.$route.query.endDate
    }
    if(this.$route.query.memberId){
      this.query.memberId = this.$route.query.memberId
      this.membername = this.$route.query.membername
    }
//    if(this.$route.query.supplierId){
//      this.query.supplierId = this.$route.query.supplierId
//      this.supplierName = this.$route.query.supplierName
//    }
    if(this.$route.query.employeeId){
      this.query.employeeId = this.$route.query.employeeId
      this.employeeName = this.$route.query.employeeName
    }
//    if(this.$route.query.productCategory){
//      this.query.productCategory = this.$route.query.productCategory
//    }
    if(this.$route.query.shopId){
      this.query.shopId = this.$route.query.shopId
      this.shopname = this.$route.query.shopname
    }
    if(this.$route.query.productId){
      this.query.productId = this.$route.query.productId;
      this.proname = this.$route.query.proname
    }
    this.loadReport()
  },
  mounted() {
    this.comeIn();
    this.beforeMount();
  },
  methods: {
    clicklookorder(data) {
      console.log(data);
      if (data.shippingType == 0) {
        this.$router.push({path: '/shipping/view', query: {id: data.shippingId}})

      } else if (data.shippingType == 1) {
        this.$router.push({
          path: '/returns/view', query: {id: data.shippingId}
        })
      }

    },
    queryProductCategoryClick(data) {
      this.query.productCategory = data.productCategoryId
    },
    queryShopClick(data) {
      this.query.shopId = data.shopId
    },
    queryProductClick(data) {
      this.query.productId = data.productId
    },
    querySupplierClick(data) {
      this.query.supplierId = data.supplierId
    },
    queryEmployeeClick(data) {
      console.log(data);
      this.query.employeeId = data.employeeId
      this.employeeName = data.name
    },
    queryDateClick(data) {
      this.query.beginDate = data.beginDate
      this.query.endDate = data.endDate
    },
    queryMemberClick(data) {
      this.query.memberId = data.memberId
    },
    chooseClick() {
      this.headerType = !this.headerType
      this.comeIn()
    },
    clearProduct() {
      this.query.productId = ''
    },
    changeProduct(data) {
      this.productName = data.name
      this.query.productId = data.id
    },
    clearSupp() {
      this.query.supplierId = ''
    },
    clearMember() {
      this.query.memberId = ''
    },
    doubleSupplier(data) {
      this.supplierName = data.name
      this.query.supplierId = data.id
      this.supplierVisible = false
    },
    supplierClose() {
      this.supplierVisible = false
    },
    changeSupp(data) {
      this.supplierName = data.name
      this.query.supplierId = data.id
    },
    toSearchSupplier() {
      this.supplierVisible = true
    },
    querySuppier(query) { // 查询供应商
      this.suppierIdOptions = []
      supplierList({name: query}).then(res => {
        res.data.data.forEach((option, index) => {
          this.$set(this.suppierIdOptions, index, option)
        })
      }).catch(err => {
        console.log(err)
      })
    },
    getSuppierList(data) { // 加载供应商
      console.log(data)
      supplierList().then(res => {
        res.data.data.forEach((option, index) => {
          this.$set(this.suppierIdOptions, index, option)
        })
      }).catch(err => {
        console.log(err)
      })
    },
    addProductClick(data) {
      if (data.length > 1) {
        this.$message({
          message: '只能查询一个商品',
          offset: 120,
          center: true
        })
      } else if (data.length == 1) {
        this.query.productId = data[0].id
        this.productName = data[0].name
        this.orderVisible = false;
      }
    },
    toAddProduct() {
      this.orderVisible = true
    },
    orderClose() {
      this.orderVisible = false
    },
    doubleClick(data) {
      this.query.productId = data.id
      this.productName = data.name
      this.orderVisible = false
    },
    queryProduct(query) { // 查询商品
      this.productOptions = []
      productList({keyword: query}).then(res => {
        res.data.data.forEach((option, index) => {
          this.$set(this.productOptions, index, option)
        })
      }).catch(err => {
        console.log(err)
      })
    },
    getProductList(data) { // 加载商品
      console.log(data)
      productList().then(res => {
        res.data.data.forEach((option, index) => {

          this.$set(this.productOptions, index, option)
        })
      }).catch(err => {
        console.log(err)
      })
    },
    changeMember(data) {
      this.memberName = data.name
      this.query.memberId = data.id
    },
    memberDouble(data) {
      this.memberName = data.name
      this.query.memberId = data.id
      this.memberTableVisible = false
    },
    memberTableClose() {
      this.memberTableVisible = false
    },
    toSearchMember() {
      this.memberTableVisible = true
    },
    queryMember(query) { // 搜索客户
      console.log(query)
      this.memberIdOptions = []
      memberList({keyword: query}).then(res => {
        res.data.data.forEach((option, index) => {

          this.$set(this.memberIdOptions, index, option)
        })
      }).catch(err => {
        console.log(err)
      })
    },
    getMemberList() { // 加载客户
      memberList().then(res => {
        res.data.data.forEach((option, index) => {

          this.$set(this.memberIdOptions, index, option)
        })
      }).catch(err => {
        console.log(err)
      })
    },
    claerName() {
      this.query.productCategoryId = ''
    },
    //下载模板的函数
    handleExport() {
      let _this = this
      var loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      //要导出函数携带的参数
      //要导出函数携带的参数
      let data = {}
      data.tHeader = ['订单日期','订单号','客户名称','客户编号','货号', "商品名称", "规格", "单位", "送货数量","退货数量", "单价", '送货金额', "退货金额", '收件人', '收件人电话', "收获地址","送货员","送达时间",  '备注','制单日期']
      data.filterVal = ['orderDate','orderSn','memberName','memberCode', 'sn', "name", "spec", "unit", "quantity","returnQuantity","price", "subTotal", 'returnSubTotal', 'consignee', 'phone', "address","shippingEmployeeName","deliveryDate",'memo', "createDate"]
      data.filename = "送货单明细表";
      var param = new URLSearchParams()
      param.append('endDate', this.query.endDate)
      param.append('startDate', this.query.beginDate)
      param.append('shopId', this.query.shopId)
      param.append('employeeId', this.query.employeeId)
      param.append('productId', this.query.productId)
      param.append('memberId', this.query.memberId)
      param.append('pageSize', this.printing)
      param.append('pageNum', this.pageNum)
      param.append('productCategoryId', this.query.productCategory)
      param.append('shippingMethod', 2)
      shippingproductDetailList(param).then(res => {
        data.list = res.data.data

        res.data.data.forEach(item => {
          if (item.orderDate != null) {
            item.orderDate = item.orderDate.split(" ")
            item.orderDate = item.orderDate[0]
          }
        })

        shippingsummary(param).then(response => {
          response.data.sn = '合计'
          data.list.push(response.data)
          _this.$refs.exportList2Excel.handleDownload(data);
          loading.close();
        })
        if (data.list.length == this.printing) {
          this.pageNum++
          console.log(this.pageNum);
          this.handleExport()
        } else {
          return;
        }

      }).catch(error => {
        _this.$refs.exportList2Excel.unlockLoading()
        loading.close();
        console.log('error!!')
      })
    },
    loadReport() {
      var param = new URLSearchParams()
      param.append('endDate', this.query.endDate)
      param.append('startDate', this.query.beginDate)
      param.append('employeeId', this.query.employeeId)
      param.append('shopId', this.query.shopId)
      param.append('supplierId', this.query.supplierId)
      param.append('productId', this.query.productId)
      param.append('memberId', this.query.memberId)
      param.append('pageSize', this.pageSize)
      param.append('pageNum', this.pageNum)
      param.append('productCategoryId', this.query.productCategory)
      param.append('shippingMethod', 2)
      shippingproductDetailList(param).then(res => {
        this.tableData = res.data.data
        this.total = res.data.total
        shippingsummary(param).then(response => {
            this.tableData.push(response.data)
        })
      })
    },
    categoryDialogConfirm(val) {
      this.query.productCategory = val.id
      this.productCategoryName = val.name
    },
    officeDialogConfirm(val) {
      this.officeName = val.name
      this.query.officeId = val.id
    },
    categoryDialogShow() {
      this.$refs.categoryDialog.show()
    },
    officeDialogShow() {
      this.$refs.officeDialog.show()
    },
    getShop() { // 获取仓库
      shopList().then(res => {
        res.data.data.forEach((option, index) => {
          const obj = {
            value: option.id,
            label: option.name
          }
          this.$set(this.shopIdOptions, index, obj)
        })
      }).catch(err => {
        console.log(err)
      })
    },
    changeTime(data) {
      if (data != null && data.length > 1) {
        this.query.beginDate = data[0]
        this.query.endDate = data[1]
      } else {
        this.query.endDate = ''
        this.query.beginDate = ''
      }
    },
    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          var headerHeight = _this.$refs.headerHeight.clientHeight
          _this.curHeight = h - 174 - headerHeight//减去页面上固定高度height
        })();
      };
    },
    comeIn() {
      console.log('222')
      var _this = this
      var h = document.documentElement.clientHeight || document.body.clientHeight;
      var headerHeight = _this.$refs.headerHeight.clientHeight
      this.curHeight = h - 174 - headerHeight//减去页面上固定高度height
    },
    totalLine({
                row,
                column,
                rowIndex,
                columnIndex
              }) {
      var _this = this
      // console.log(_this.tableData.length - 1)
      // console.log(columnIndex)
      if (rowIndex === _this.tableData.length - 1) {
        if (columnIndex === 0) {
          return {
            rowspan: 1,
            colspan: 6
          };
        } else if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5) {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  },
}
</script>

<style scoped>
.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/ .el-header {
  padding: 10px;
  height: 100% !important;
  padding-bottom: 0;
}

.details_Title {
  font-size: 14px;
  color: #409EFF;
}

.justify_right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.primary {
  margin-left: 10px;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: white;
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 10px;
}


.report_header_left {
  width: 5px;
  height: 100%;
  background-color: #409EFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.report_header_query {
  margin-left: 10px;
  width: 130px;
  margin-top: 5px;
}

/deep/ .el-button {
  height: 35px;
}

.report_header_date {
  box-sizing: border-box;
  margin-left: 10px;
  width: 270px;
  margin-top: 5px;
}

.report_footer_box {
  width: 100%;
  border: 1px solid #dfe6ec;
  border-top: none;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: white;
}

/deep/ .el-footer {
  padding: 10px;
  padding-top: 0;
}

.report_footer_box_title {
  margin-left: 10px;
  font-size: 12px;
  font-weight: bold;
}

.elOption {
  background-color: #909399;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 40px
}


/deep/ .el-table--group::after,
.el-table--border::after,
.el-table::before {
  background-color: white;
}

/deep/ .el-table__body tbody .el-table__row:last-child {
  background-color: #F5F7FA;
}

/deep/ .el-main {
  padding: 10px;
  padding-bottom: 0;
}

/deep/ .el-table--enable-row-transition .el-table__body td {
  border-bottom: none;
}

/deep/ .el-table::before {
  height: 0px;
}

/deep/ .el-table--border th {
  background-color: rgba(241, 242, 243, 1);
}

/deep/ .pagination-container {
  margin-top: 0 !important;
}
</style>
